<template>
  <view class="signatoriesList">
    <view class="search">
      <u-search
        v-model="seachData.keyword"
        :placeholder="$t('签约方名称')"
        @change="changeFn"
        @custom="downCallback"
        @search="downCallback"
      ></u-search>
    </view>
    <mescroll-uni
      ref="mescrollRef"
      :down="downOption"
      :up="upOption"
      top="100"
      @down="downCallback"
      @emptyclick="emptyClick"
      @init="mescrollInit"
      @up="upCallback"
    >
      <!-- 数据列表 -->
      <good-list :list="goods" @clickItem="clickItem"></good-list>
    </mescroll-uni>
  </view>
</template>
<script>
let eventChannel
import { mapGetters, mapMutations } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import goodList from './components/good-list.vue'

export default {
  mixins: [MescrollMixin],
  components: {
    goodList
  },
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  props: {},
  data() {
    return {
      //搜索
      seachData: {
        keyword: '', //签约方
        enterpriseId: '' //企业id
      },
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 5, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无记录')} ~`,
          fixed: true,
          top: '200rpx'
        },
        textNoMore: `~ ${this.$t('触底了')} ~`
      },
      goods: [], //列表数据
      oldSelectList: []
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({title: this.$t('签约方列表')})
    eventChannel = this.getOpenerEventChannel()
    eventChannel.on('pagePramas', (data) => {
      this.seachData.enterpriseId = data.enterpriseId
      //已选择的签约方
      this.oldSelectList = data.oldSelectList
    })
  },
  onShow() {},
  methods: {
    changeFn() {
      this.$u.debounce(this.downCallback)
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.goods = []
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      setTimeout(() => {
        this.findList(page)
      }, 500)
    },
    findList(page) {
      let req = {
        pageSize: page.size, //每页的数量
        pageNum: page.num, // 当前显示第几页
        page: true,
        ...this.seachData
      }
      //章的接口
      this.$u
        .get(this.api.GLOBAL_electronic_contract_findEnterpriseLiaisonList, req, {
          'content-type': 'application/json'
        })
        .then((res) => {
          if (page.num === 1) {
            this.goods = []
          }
          if (res.code === 200 && res.data && res.data.list) {
            this.mescroll.endBySize(res.data.list.length, res.data.total)
            let arr = res.data.list.filter((item) => {
              item.phone = ''
              if (!this.oldSelectList.includes(item.id)) {
                return item
              }
            })
            this.goods = this.goods.concat(arr)
          } else {
            this.mescroll.endBySize(0, 0)
            this.goods = []
          }
        })
        .catch((err) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },
    clickItem(row) {
      uni.navigateBack({
        delta: 1,
        success() {
          eventChannel.emit('confirm', row)
        }
      })
    },
    //点击空布局按钮的回调
    emptyClick() {}
  }
}
</script>

<style lang="scss" scoped>
.signatoriesList {
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}
</style>
